<template>
  <div class="coachInfoPage">
      <go-top :size="60" bg-color="#2e2efe" :bottom="60"></go-top>
      <div class="breadcrumb">
          <router-link class="home" to="/"></router-link> > <router-link to="/coach">코칭서비스</router-link> > 채용정보서칭
      </div>
      <div class="con">
          <div class="infos">
              <img class="pic" src="@images/coach/topPic3.jpg" alt="">
              <div class="longTit">상세설명</div>
              <div class="steps">
                  <strong>도전할 수 있는 채용정보 찾기의 첫걸음을 함께합니다.</strong>
                  <p>취업 정보 사이트에서 채용정보를 열심히 찾아봐도,<br/>도무지 지원할 만한 채용정보가 검색되지 않는 경험 있으신가요?<br/>복잡한 취업 정보 사이트에서 더 이상 헤매지 마세요.<br/>중장년 취업 전문 잡 매니저가 당신의 이력서와 적합도가 높은 채용정보를<br/>직접 검색하고 추천해드립니다.</p>
                  <ul>
                      <li>
                        <img src="@images/coach/info/1.png" alt="">
                        <strong>중장년 취업<br/>전문 잡 매니저</strong>
                      </li>
                      <li>
                        <img src="@images/coach/info/6.png" alt="">
                        <strong>이력서 부합 여부 판독 및<br/>서칭된 채용정보 확인 검수</strong>
                      </li>
                      <li>
                        <img src="@images/coach/info/7.png" alt="">
                        <strong>중장년 적합<br/>채용공고 추천</strong>
                      </li>
                  </ul>
              </div>
              <div class="videoBox">
                <iframe width="100%" height="100%" src="https://www.youtube-nocookie.com/embed/VIn_Ht00IdU?rel=0" frameborder="0"></iframe>
              </div>
              <div class="shortTit">
                  <span>이런 분들에게 추천합니다.</span>
              </div>
              <div class="dot">
                  <p>채용 플랫폼에서 채용공고 검색이 어려우신 분</p>
                  <p>청장년층 위주 채용 플랫폼의 채용정보에 실망하신 분</p>
                  <p>지원할 채용 공고 결정에 어려움을 겪고 계신 분</p>
              </div>
              <div class="shortTit">
                  <span>서비스 포인트 </span>
              </div>
              <div class="hooks">
                <p class="tit"><b>잡 매니저만의 채용 공고 해석 역량을 활용하여, 나와 적합도가 높은 채용 공고를 직접 검색하여 추천합니다.</b></p>
                <p>오픈 채용 플랫폼의 채용정보 중 중장년과 적합도가 높은 채용정보 자동 필터링</p>
                <p>중장년 취업 전문 잡 매니저가 직접 적합한 채용공고 검색 및 추천 </p>
              </div>
              <div class="shortTit">
                  <span>소요시간</span>
              </div>
              <div class="times">
                  <p>* 채용정보서칭은 신청일 이후 3~4영업일 이내 최대 3개의 채용정보를 제공합니다.</p>
<!--                  <p style="margin-left: 10px;">(신청일 이후 3~4영업일 이내 1회 / 그 이후 14영업일 이내 2회)</p>-->
                  <p>* 채용 시장의 상황에 따라서 추천 가능한 채용정보의 수가 변동될 수 있습니다.</p>
              </div>
              <div class="shortTit">
                  <span>서비스 이용 방법</span>
              </div>
              <div class="flows">
                  <ul>
                      <li>
                          <div class="round">워크위즈<b>이력서 작성</b></div>
                          워크위즈에서 이력서를<br/>작성합니다.<span>(이력서 파일 업로드 가능)</span>
                      </li>
                      <li>
                          <div class="round">채용정보서칭<b>신청</b></div>
                          신청하기를 클릭하고,<br>간단한 신청서를 작성합니다.
                      </li>
                      <li>
                          <div class="round">채용정보서칭<b>결과확인</b></div>
                          마이페이지에서 채용정보서칭<br/>결과를 확인합니다.
                      </li>
                      <li>
                          <div class="round">채용<b>지원</b></div>
                          추천받은 채용 공고의<br/>지원 여부를 검토합니다.
                      </li>
                  </ul>
                  <div class="des">
                    <p class="tit"><b>(참고) 워크위즈 이력서를 활용하면 좋은 점! → <router-link to="/help/matchingView?id=33">바로가기</router-link></b></p>
                    <p>중장년의 매력이 돋보일 수 있도록, 필요에 맞게 디자인되었습니다.</p>
                    <p>워크위즈의 다양한 서비스를 빠르게 경험할 수 있습니다.</p>
                    <p>직접 <b style="color:#2e2efe">다운로드 하여</b> 편리하게 실제 채용 지원에 사용할 수 있습니다.</p>
                    <p><b>이력서 작성 꿀팁</b> → <router-link to="/help/matchingView?id=32"><span style="color:#2e2efe"><b>바로가기</b></span></router-link></p>
                  </div>
              </div>
              <div class="shortTit">
                  <span>결과 미리 보기</span>
              </div>
              <div class="rels">
                  <p>중장년 취업 전문 잡 매니저의 채용정보 해석 노하우가 담긴 채용정보를 추천받을 수 있습니다.</p>
                  <div class="box"><el-image :src="pic" :preview-src-list="picList"></el-image></div>
              </div>
              <div class="longTit">환불규정</div>
              <div class="refund">
                  <p class="tit">가. 기본 환불 규정</p>
                  <p>1. 작업 진행 전일 경우 전문가와 의뢰인 상호 협의하에 청약 철회 및 환불이 가능합니다.</p>
                  <p>2. 서비스 신청 전 : 환불 신청 시 100% 환불</p>
                  <p>3. 서비스 신청완료 상태에는 환불이 불가합니다.</p>
                  <p>4. 서비스가 완료된 이후에는 환불이 불가합니다.</p>
                  <br/>
                  <p class="tit">나. 전문가 책임 사유</p>
                  <p>1. 전문가의 귀책사유로 당초 약정했던 서비스 미이행 혹은 보편적인 관점에서 심각하게 잘못 이행한 경우 결제 금액 전체 환불이 가능합니다.</p>
                  <br/>
                  <p class="tit">다. 의뢰인 책임 사유</p>
                  <p>1. 서비스 진행 도중 의뢰인의 귀책사유로 인해 환불을 요청할 경우, [가. 기본 환불 규정]에 따라 환불 처리됩니다.</p>
                  <p>2. 상담 진행 중 의뢰인의 폭언, 욕설 등이 있을 경우 상담은 종료되며 잔여 이용요금은 환불되지 않습니다.</p>
                  <br/>
                  <p class="tit">라. 휴대폰 결제의 경우</p>
                  <p>1. 휴대폰 결제 건은 당월 결제 취소만 가능하며, 익월 이후 휴대폰 결제 환불 건은 입금 확인 후 결제자 본인 계좌로만 환불 가능합니다.</p>
              </div>
          </div>
          <div id="coachFrmBox" class="form">
              <div class="tit">
                  <b>채용정보서칭</b>속 시원한 채용정보서칭 서비스
              </div>
              <div class="frm" v-loading="frmLoading">
              <el-form :model="frm" :rules="rules" ref="coachFrm">
                <ul>
                    <li v-for="(item,index) in CSOption" :key="index">
                        <label class="t">{{item.value}}</label>
                        <p>{{item.title}}</p>
                        <p class="des">{{item.describe}}</p>
                        <div class="price">
                          <em v-if="item.discount">{{item.discount}}%</em><b>{{curToThousands(item.price)}}원</b><s>{{curToThousands(item.original_price)}}원</s>
                        </div>
                    </li>
                </ul>
                <ul class="b2">
                  <li class="pad">
                    <el-form-item prop="service_option">
                      <label class="mb">옵션선택</label>
                      <el-select style="width:100%" v-model="frm.service_option" placeholder="선택해주세요" @change="getPrice">
                        <el-option :label="item.value" :value="item.id" v-for="(item,index) in CSOption" :key="index"></el-option>
                      </el-select>
                    </el-form-item>
                  </li>
                  <li class="inline pad">
                    <el-form-item :prop="!!coupon || totalPrice == 0 ? '' : 'pay_type'">
                      <label>결제방법</label>
                      <el-select
                        :disabled="!!coupon"
                        :placeholder="coupon ? '(무료결제)' : '결제 방법 선택'"
                        style="width:60%"
                        v-model="frm.pay_type"
                      >
                      <el-option :label="item.value" :value="item.id" v-for="(item,index) in CSPayOption" :key="index"></el-option>
                      </el-select>
                    </el-form-item>
                  </li>
                  <li class="inline nb">
                      <label>결제금액</label>
                      <b class="total">{{ !!coupon ? '0' : curToThousands(totalPrice)}}원</b>
                  </li>
                  <li class="coupon" v-if="coupon && coupon.message">
                    <b>({{coupon.message}})</b>
                  </li>
                  <li id="coachFrmSub">
                      <el-button type="primary" style="width:100%"  :loading="loading" @click="submitForm">결제하기</el-button>
                  </li>
                </ul>
              </el-form>
              </div>
          </div>
      </div>
      <el-button v-if="btnShow" type="primary" id="bomBtn" @click="scrollAnchorPoint">결제하기</el-button>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import { Local, toThousands } from '@/utils'
import { getCSOption, getCSPayOption, createOrder, checkPayment, getPayToken, getCoupon } from '@/api'
import { payment } from '@/utils/payment'
import GoTop from '@inotom/vue-go-top';
export default {
  name: '',
  components: { GoTop },
  props: [],
  data () {
    return {
      pic: require('@images/coach/pic/3-1.jpeg'),
      picList: [
        require('@images/coach/pic/3-2.jpeg')
      ],
      frmLoading: true,
      loading: false,
      CSOption: [],
      CSPayOption: [],
      coupon: null,
      totalPrice: 0,
      frm: {
        service_type: 3,
        service_option: '',
        pay_type: ''
      },
      rules: {
        service_option: [
          { required: true, message: '서비스를 선택해 주세요', trigger: 'change' }
        ],
        pay_type: [
          { required: true, message: '결제방식을 선택해 주세요', trigger: 'change' }
        ],
      },
      orderData: null,
      btnShow: true,
    }
  },
  computed: {
    ...mapState(['userInfo'])
  },
  created () {
    this.getCSOption()
    this.getCSPayOption()
    if (!!this.$store.state.token) {
      this.getCoupon()
    }
  },
  mounted () {
    window.scrollTo(0, 0);
    window.addEventListener('scroll', this.handleScroll)
  },
  methods: {
    async getCSOption () {
      let res = await getCSOption({ type: 3 });
      if (res.code == 200) {
        this.CSOption = res.data;
        this.frm.service_option = this.CSOption[0].id
        this.totalPrice = this.CSOption[0].price
        this.frmLoading = false;
      } else {
        this.frmLoading = false;
      }
    },
    async getCSPayOption () {
      let res = await getCSPayOption();
      if (res.code == 200) {
        this.CSPayOption = res.data;
      }
    },
    async getCoupon () {
      let res = await getCoupon({ type: 3 });
      if (res.code == 200) {
        this.coupon = res.data;
      }
    },
    async submitForm () {
      if (this.userInfo && this.userInfo.member_type == 2) {
        this.$alert('코칭서비스는 개인회원만 이용이 가능합니다.', '알림', {
          confirmButtonText: '확인'
        });
        return false;
      }
      let valid_type
      this.$refs['coachFrm'].validate((valid, error) => {
        valid_type = valid
      });
      valid_type = !!this.coupon || this.totalPrice == 0 ? true : valid_type
      if (valid_type) {
        this.loading = true;
        let params = {
          ...this.frm,
          coupon_id: this.coupon ? this.coupon.id : ''
        }
        params.pay_type = !!this.frm.pay_type ? this.frm.pay_type : this.CSPayOption[0].id
        let res = await createOrder(params)
        try {
          if (res.code == 200) {
            this.orderData = res.data;
            if (JSON.stringify(this.coupon) !== "{}" && !!this.coupon || this.totalPrice == 0) {
              return this.$router.push({
                path: '/pay/success',
                query: {
                  id: this.orderData.id,
                  type: 3
                }
              })
            }
            let _pg = 'danal_tpay';
            if (res.data.pay_method == 'phone') {
              _pg = 'danal'
            }
            this.orderData.pg = _pg
            payment(this.orderData, this.pay)
          } else {
            this.$alert(res.message, '알림', {
              confirmButtonText: '확인'
            });
            this.loading = false;
          }
        } catch (error) {
          this.loading = false;
        }
      } else {
        return false;
      }
    },
    async pay (rsp) {
      if (rsp.success) {
        let res = await checkPayment({ imp_uid: rsp.imp_uid, merchant_uid: rsp.merchant_uid });
        if (res.code == 200) {
          this.loading = false;
          this.$router.push({
            path: '/pay/success',
            query: {
              id: this.orderData.id,
              type: 3
            }
          })
        } else {
          this.loading = false;
        }
      } else {
        Local.set('coachData', { path: '/coach/matching', data: this.orderData })
        this.loading = false;
        this.$router.push({
          path: '/pay/fail',
          query: {
            id: this.orderData.id,
            msg: rsp.error_msg
          }
        })
      }
    },
    getPrice () {
      let index = this.CSOption.findIndex(item => item.id == this.frm.service_option);
      this.totalPrice = this.CSOption[index].price;
    },
    scrollAnchorPoint () {
      var _top = $('#coachFrmSub').offset().top, _h = $('header').height();
      $('body,html').animate({ scrollTop: _top - _h - 60 }, 500);
    },
    handleScroll () {
      let _top = $('#coachFrmBox').offset().top;
      this.btnShow = window.pageYOffset < _top - 100
    },
    curToThousands (num) {
      return toThousands(num)
    }
  },
  beforeDestroy () {
    window.removeEventListener('scroll', this.handleScroll)
  },
  watch: {}
}
</script>
<style lang="scss" scoped>
@import '@/assets/styles/coach.scss';
</style>
